<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="绑定点击事件" v-on:click="show()">
        <input type="button" value="绑定点击事件" v-on:click="show">
        <input type="button" value="绑定点击事件" v-on="func">
        <input type="button" value="绑定点击事件" @click="show()">
        <hr>
        <input type="text" @blur="func2()" @focus="func1()">
        <input type="text" v-on="fun">
        <input type="text" v-on="{focus:func1,blur:func2}">
        <hr>
        <input type="button" value="为click添加多个回调" @click="func1()" @click="func2()">
        <input type="button" value="为click添加多个回调" @click="func1(),func2()">
        <input type="button" value="为click添加多个回调" @click="[func1(),func2()]">
        <hr>
        <input type="button" value="传入参数的this" @click="getThis(this)">
        <hr>
        <input type="button" value="形参的分类" @click="getArg(123,'字符串',[1,2,4],{name:'iboy',age:20},true)">
        <input type="button" value="形参的分类" @click="getArg(1+2,'字符串'+'拼接',Math.random(),false||true,false?'是':'否')">
        <input type="button" value="形参的分类" @click="getArg(str,num,array)">
        <input type="button" value="获取当前DOM对象" @click="getDom()">
        <input type="button" value="获取当前DOM对象" @click="getThisDom($event)">
        <hr>
        <input type="text" @input="getValue($event.target.value)">
        <hr>
        <h2 v-show="flag">这是一个h2标签</h2>
        <h3 v-show="!flag">这是一个h3标签</h3>
        <input type="button" value="切换标签" @click="flag=!flag">
        <input type="button" value="切换标签" @click="changeEl()">
        <hr>
        <p>msg:{{msg}}</p>
        <input type="text" @input="msg=$event.target.value">
        <hr>
        <p>str1:{{str1}}</p>
        <input type="button" value="随机赋值" @click="str1=Math.random()*1000">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                func:{
                    click:function(){
                        console.log("这是一个定义在数据仓库中的方法调用!");
                    }
                },
                fun:{
                    blur:function(){
                        console.log("失去了焦点");
                    },
                    focus:function(){
                        console.log("得到了焦点");
                    }
                },
                str:"字符串",
                num:1234,
                array:[1,2,34,5],
                flag:true,
                msg:"",
                str1:""
            },
            methods:{
                show:function(){
                    console.log("这是一个点击事件!");
                },
                func1:function(){
                    console.log("得到焦点");
                },
                func2:function(){
                    console.log("失去焦点");
                },
                getThis:function(e){
                    console.log(e);
                    console.log(this);
                },
                getArg:function(arg1,arg2,arg3,arg4,arg5){
                    console.log(arg1,arg2,arg3,arg4,arg5);
                },
                getDom:function(){
                    console.log(this);
                    console.log(this.num);
                    console.log(this.str);
                    console.log(this.show);
                    this.show();
                },
                getThisDom:function(e){
                    console.log(e);
                    console.log(e.target);
                    console.log(e.target.value);
                },
                getValue:function(e){
                    console.log(e);
                },
                changeEl:function(){
                    this.flag=!this.flag;
                }
            }
        })
    </script>
</body>
</html>